<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>less实例</title>
		<link rel="stylesheet" type="text/css" href="less/shili.css"/>
	</head>
	<body>
		<header>
			<img class="logo" src="img/logo.png"></img>
			<ul class="l">
				<li><a href="#">首页</a></li>
				<li><a href="#">实战</a></li>
				<li><a href="#">路径</a></li>
				<li><a href="#">猿问</a></li>
				<li><a href="#">手记</a></li>
			</ul>
			<ul class="r">
				<div class="search">
					<form method="post" name="fileForm" id="form" enctype="multipart/form-data">
						<input id="val" name="content" type="file" placeholder="请输入想搜索的内容..."/>
						<span id="search"></span>
					</form>
				</div>
				<li><a href="#">下载</a></li>
				<li><a href="#">提醒</a></li>
				<li><a href="#">邮件</a></li>
				<li><a href="#">用户</a></li>
			</ul>
		</header>
		
		
		<script>
			
			var search = document.getElementById('search');
			var fa = true;
			
			search.addEventListener('click', function(){
//				var value = val.value;
//				var data = new FormData();
//				data.append("content", value);
//				console.log(data);
				
				var val = document.getElementById('val');
				
				fa && val.value ? ajax(val) : '';
			}, false)
			
			
			function ajax(val){
				fa = false;
				
				var value = val.value,
					form = document.getElementById('form');
				var data = new FormData(form);
				data.append("lujing", value);
				
				var xhr = new XMLHttpRequest();
				xhr.open('post', 'http://192.168.1.84:10081/testformdata.php', true);
				xhr.send(data);
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4){
						if(xhr.status == 200){
							alert("OK!");
//							JSON.parse(xhr.responseText);
							console.log(xhr.responseText);
							fa = true;
						}
					}
				}
			}
		</script>
	</body>
</html>
